<template>
    <el-dialog :title="`${ruleForm.id ? '编辑' : '新增'}`" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <el-form v-loading="pageLoading" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="auto">
            <c-form-template lable="基本信息">
                <el-col :span="21">
                    <el-form-item label="银行名称" prop="bankName">
                        <div class="flex-y-center">
                            <el-input v-model="ruleForm.bankName" placeholder="请输入银行名称"></el-input>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="21">
                    <el-form-item label="服务费比例" prop="ratio">
                        <c-number-input v-model="ruleForm.ratio" placeholder="请输入服务费比例"><template slot="append"> % </template></c-number-input>
                    </el-form-item>
                </el-col>
                <el-col :span="21">
                    <el-form-item label="授信利率区间" prop="creditRate">
                        <c-number-range v-model="ruleForm.creditRate">
                            <template slot="append"> % </template>
                        </c-number-range>
                    </el-form-item>
                </el-col>
                <el-col :span="21">
                    <el-form-item label="平台账户号" prop="platformAccount">
                        <el-input v-model="ruleForm.platformAccount" placeholder="请输入平台账户"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="21">
                    <el-form-item label="是否需要保函">
                        <el-radio-group v-model="ruleForm.isGuarantee">
                            <el-radio label="是" value="1"></el-radio>
                            <el-radio label="否" value="0"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </c-form-template>
        </el-form>
        <span slot="footer">
            <el-button :loading="loading" @click="handleClose">取消</el-button>
            <el-button :loading="loading" type="primary" @click="handleSubmit" v-if="!ruleForm.isExamine">确认</el-button>
        </span>
    </el-dialog>
</template>
<script>
export default {
    components: {},
    data () {
        return {
            dialogVisible: false,
            loading: false,
            pageLoading: false,
            ruleForm: {

            },
            rules: {
                bankName: [
                    { required: true, message: "请输入银行名称", trigger: "blur" },
                ],
                ratio: [
                    { required: true, message: "请输入服务费比例", trigger: "blur" },
                ],
                creditRate: [
                    {
                        type: "array",
                        required: true,
                        message: "请输入授信利率区间",
                        trigger: "blur",
                    },
                ],
                isGuarantee: [
                    { required: true, message: '请选择是否需要保函', trigger: 'change' }
                ],
                platformAccount: [
                    { required: true, message: "请输入平台账户", trigger: "blur" },
                ],
            },
        };
    },
    created () {
    },

    methods: {
        handleOpen (item) {
            this.dialogVisible = true;
            this.ruleForm = {
                isExamine: item.isExamine || false,
            };
        },
        handleClose () {
            this.ruleForm = {

            };
            this.$refs.ruleForm.resetFields();
            this.dialogVisible = false;
        },
    },
};
</script>
<style scoped lang="scss">
</style>
